<template>
  <el-dialog
    :destroy-on-close="true"
    :title="title"
    :visible.sync="dialogFormVisible"
    width="60%"
    @close="close"
  >
    <el-table v-loading="listLoading" :data="list">
      <el-table-column align="center" label="模板ID" prop="id" width="80px" />
      <el-table-column align="center" label="模板类型" prop="template_type">
        <template #default="{ row }">
          <div v-for="(item, index) in dictList" :key="index">
            <div v-if="row.template_type == item.item_code">
              {{ item.item_name }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="模板标识"
        prop="template_code"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="模板标题"
        prop="template_title"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="模板内容"
        prop="template_content"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="签名"
        prop="sign_name"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="状态"
        prop="template_status_name"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="操作"
        show-overflow-tooltip
        width="85"
      >
        <template #default="{ row }">
          <el-button type="text" @click="handleEdit(row)">编辑</el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-image
          class="vab-data-empty"
          :src="require('@/assets/empty_images/data_empty.png')"
        />
      </template>
    </el-table>
    <message-edit-detail ref="messageEditDetail" @fetch-data="getTpl" />
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="close">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import { getTplList } from '@/api/message'
  import { getDictByCode } from '@/utils/dict'
  import messageEditDetail from './editDetail'
  export default {
    name: 'MsgDetail',
    components: { messageEditDetail },
    data() {
      return {
        group_mark: '',
        title: '消息模板组详情',
        dialogFormVisible: false,
        listLoading: false,
        list: [],
        dictList: [],
      }
    },
    methods: {
      showEdit(row) {
        this.group_mark = row.group_mark
        this.getTpl()
        this.getDict()
        this.dialogFormVisible = true
        this.$forceUpdate()
      },
      handleEdit(row) {
        this.$refs['messageEditDetail'].showEdit(row)
      },
      close() {
        this.dialogFormVisible = false
        this.$emit('fetch-data')
      },
      async getDict() {
        this.dictList = await getDictByCode('message_send_type')
      },
      async getTpl() {
        this.listLoading = true
        const { data } = await getTplList({ group_mark: this.group_mark })
        this.list = data
        this.listLoading = false
      },
    },
  }
</script>
